<template>
  <el-dropdown v-on="$listeners" @visible-change="onVisibleChange">
    <z-button :size="size">
      {{ operate.label }}
      <z-icon icon="el-icon-arrow-down" :size="12" :class="{ rotate: isVisble }"></z-icon
    ></z-button>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item v-for="item in operate.dropdownMenus" :key="item.value" :command="item">{{
        item.label
      }}</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
import ZButton from "./ZButton.vue";
import ZIcon from "./ZIcon.vue";
export default {
  name: "ZDropdown",
  components: {
    ZButton,
    ZIcon,
  },
  props: {
    operate: {
      type: Object,
      default: () => {},
    },
    size: {
      type: String,
      default: "small",
    },
  },
  data() {
    return {
      isVisble: false,
    };
  },
  methods: {
    onVisibleChange(e) {
      this.isVisble = e;
      this.$emit("visible-change", e);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-icon-arrow-down {
  transition: all 0.3s;
}

.rotate {
  transform: rotate(-180deg);
}
</style>
